<!--
 * @页面名称: 模式3
 * @描述: 有案卷,卷内,全文,案卷下有卷内
 * @作者: 辛慰
 * @Date: 2020-07-31 12:00:08
-->
<template>
  <div class="mode-three">
    <!-- 左侧树 -->
    <left-tree
      :tabList="tabList"
      :isShowLeftTree.sync="isShowLeftTree"
      :treeData="treeData"
      @tabClick="tabClick">
    </left-tree>
    <div class="right-table" :style="{width: (isShowLeftTree ? 'calc(100% - 2px)': '82%')}">
      <!-- 案卷模块 -->
      <div v-if="tabItemType==='tab_leftTab1'" style="height: 100%;">
        <splitpanes horizontal style="height: 200%;">
          <pane>
            <floder-card
              @floderToLink="floderToLink"
              :tableData="floderTableData"
              :tableColumns="floderColumns"
              :floderLinkData="floderLinkData">
            </floder-card>
          </pane>
          <pane>
            <file-card
              id="file-card">
            </file-card>
          </pane>
        </splitpanes>
      </div>
      <!-- 卷内模块 -->
      <div v-if="tabItemType==='tab_leftTab2'" style="height: 100%;">
        <file-card></file-card>
      </div>
      <!-- 未归档模块 -->
      <div v-if="tabItemType==='tab_leftTab3'" style="height: 100%;">
        <file-card></file-card>
      </div>
    </div>
  </div>
</template>

<script>
import { LeftTree, FloderCard, FileCard } from '@/views/dynamic/components'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
export default {
  name: '',
  components: {
    LeftTree,
    FloderCard,
    FileCard,
    Splitpanes,
    Pane
  },
  data () {
    return {
      tabList: [
        { name: '案卷', mode: '1' },
        { name: '卷内', mode: '2' },
        { name: '未归档', mode: '3' }
      ],
      isShowLeftTree: false, // 是否显示左侧数据
      tabItemType: 'tab_leftTab1',
      treeData: [ // 左侧树
        {
          title: '党群类档案',
          key: '1',
          children: [
            { title: 'DQ11 党务综合', key: '1-0' },
            { title: 'DQ12 几件，监察', key: '1-1' },
            { title: 'DQ13 组织', key: '1-2' },
            { title: 'DQ14 宣传教育', key: '1-3' },
            { title: 'DQ15 统战', key: '1-4' },
            { title: 'DQ16 工会', key: '1-5' },
            { title: 'DQ17 共青团', key: '1-6' }
          ]
        }
      ],
      floderTableData: [{
        IsLock: true,
        OrderNum: '1',
        Year: '2020',
        Code: '1990-1-001',
        topic: '河南新安虎马沟村系列杀人抢劫案',
        BGQXData: '永久',
        MJ: '机密',
        Op_ID: 'admin',
        Remark: '测试数据1'
      }, {
        IsLock: false,
        OrderNum: '2',
        Year: '2020',
        Code: '1990-1-002',
        topic: '河南新安虎马沟村系列杀人抢劫案',
        BGQXData: '30年',
        MJ: '机密',
        Op_ID: 'admin',
        Remark: '测试数据2'
      }, {
        IsLock: false,
        OrderNum: '3',
        Year: '2020',
        Code: '1990-1-003',
        topic: '河南新安虎马沟村系列杀人抢劫案',
        BGQXData: '永久',
        MJ: '机密',
        Op_ID: 'admin',
        Remark: '测试数据3'
      }, {
        IsLock: false,
        OrderNum: '4',
        Year: '2020',
        Code: '1990-1-004',
        topic: '河南新安虎马沟村系列杀人抢劫案',
        BGQXData: '永久',
        MJ: '机密',
        Op_ID: 'admin',
        Remark: '测试数据4'
      }],
      floderColumns: [{ // 案卷表头数据
        title: '锁标志',
        field: 'IsLock'
      }, {
        title: '顺序号',
        field: 'OrderNum'
      }, {
        title: '年代号',
        field: 'Year'
      }, {
        title: '档号',
        field: 'Code'
      }, {
        title: '题名',
        field: 'topic'
      }, {
        title: '保管期限',
        field: 'BGQXData'
      }, {
        title: '密级',
        field: 'MJ'
      }, {
        title: '操作员',
        field: 'Op_ID'
      }, {
        title: '备注',
        field: 'Remark'
      }],
      floderLinkData: [ // 案卷下有的数据
        {
          title: '文件数据'
        }
      ]
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    tabClick (val) {
      switch (val) {
        case '1':
          this.tabItemType = 'tab_leftTab1'
          break
        case '2':
          this.tabItemType = 'tab_leftTab2'
          break
        case '3':
          this.tabItemType = 'tab_leftTab3'
          break
      }
    },
    // 跳转到案卷表格下对应的数据
    floderToLink () {
      document.getElementById('file-card').scrollIntoView({ block: 'end', behavior: 'smooth' })
    }
  }
}
</script>
<style lang="less" scoped>
.mode-three {
  height: 100%;
  display: flex;
  .right-table {
    transition: all 0.2s;
  }
}
</style>
